<template>
  <footer class="todo-footer"  v-if="todos.length > 0">
    <input type="checkbox" @change="toggleAll" :checked="isAllCompleted" />
    <div>{{ src }}</div>
    <button @click="clearCompleted">清除已办</button>
    <button @click="clearAll">清除所有</button>
  </footer>
  <h2 v-else class="todo-empty">暂无待办事项</h2>
</template>

<script setup>
import { computed } from 'vue';

const todos = defineModel('todos');

//判断是否全选
const isAllCompleted = computed(() => {
  return todos.value.every((item) => item.completed);
});


const src = computed(() => {
  const total = todos.value.length;
  const completed = todos.value.filter((item) => item.completed).length;
  return `已办事项${completed}/全部事项${total}`;
});

//全选
const toggleAll = () => {
  const checked = !todos.value.every((item) => item.completed);
  todos.value.forEach((item) => {
    item.completed = checked;
  });
};

//清除已办
const clearCompleted = () => {
    todos.value = todos.value.filter((item) => !item.completed);
};

//清除所有
const clearAll = () => {
    todos.value = [];
};
</script>

<style scoped>
.todo-footer {
  display: flex;
  margin-top: 20px;
  padding: 10px 40px;
  background-color: #87ceeb;
}
.todo-footer div {
  flex: 1;
  margin-left: 20px;
}
.todo-footer button {
  margin-left: 10px;
  padding: 0 10px;
}

.todo-empty {
  text-align: center;
  margin-top: 30px;
  color: #666;
}
</style>
